<template>
    <div class="goodinfo">


        <transition 
        @before-enten="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>            
        </transition>
 


        <!-- 商品轮播图 -->
       <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swipLunbo :lunbotuLinst="Lubutu"></swipLunbo>
                </div>
            </div>
		</div>
        <!-- 商品购买 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <p class="price">
                            市场价 <del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价<span class="now_price">￥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>购买数量: <numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox> </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                            <!-- 分析: 如何实现加入购物车从 拿到选择的数量 -->
                            <!-- 1. 按钮属于goodsinfo s数字 属于 goodinfo_box 组件 -->
                            <!-- 2. 由于涉及到父子组件的嵌套  无法直接在  goodsinfo  页面中获取到 -->
                            <!-- 3. 子组件 向 父组件传值(事件调用事件) -->
                            <!-- 4. 事件调用的本质 ：  父向子传递方法   子调用这个方法    同时把数据当做参数  传递  给这个方法-->
                        </p>
                    </div>
                </div>
		</div>


        <!-- 商品参数 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号:{{goodsinfo.goods_no}}</p>
                    <p>库存情况:{{goodsinfo.stock_quantity}}件</p>
                    <p>上架时间:{{goodsinfo.add_time | dataFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDese(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="gocomment(id)">商品评论</mt-button>
            </div>
		</div>

    </div>
</template>

<script>
import numbox from "../subcomponent/goodinfo_box"
import swipLunbo from "../subcomponent/swipLunbo"
    export default {
        components:{
            swipLunbo,
            numbox
        },
        data(){
            return{
                id : this.$route.params.id, //将路由
                Lubutu:[],
                goodsinfo:[],
                ballFlag:false, 
                selectedCount:1
            }
        },
        created(){
            this.getLunbotu();
            this.getGoodsinfo();
        },
        methods:{
            getLunbotu(){
                 this.$http.get("api/getthumimages/" + this.id).then(res=>{
                     if(res.body.status ===0){
                        //  先循环轮播图数组的每一项，为item 添加 img属性  因为 轮播图 组件中 ，只认识
                        //  item.img  不认识item.src
                        res.body.message.forEach(item => {
                            item.img = item.src;
                        });
                         this.Lubutu = res.body.message;
                     }
                 })
            },
            getGoodsinfo(){
                // 获取商品的
                this.$http.get('api/goods/getinfo/' + this.id).then(res=>{
                    if(res.body.status ===0 ){
                        this.goodsinfo = res.body.message[0]
                    }
                })
            },
            addToShopCar(){
                this.ballFlag = !this.ballFlag
                // { id : 商品的id , count:要购买的数量 , price: 商品的单价 , selected:false} 
                // 拼接出一个 要保存到 store 这 car 数组里的 商品信息对象
                var goodsinfo = {
                    id:this.id,
                    count:this.selectedCount,
                    price:this.goodsinfo.sell_price,
                    selected:true
                }
                // 调用 store 中的  mutations 来将商品加入购物车
                this.$store.commit("addToCar",goodsinfo)
            },
            // 图文
            goDese(id){
                this.$router.push({name:"goodsdese",params:{ id }})
            },
            // 评论
            gocomment(id){
                this.$router.push({name:"goodscomment",params:{id}})
            },
            beforeEnter(el){
                el.style.transform = "translate(0, 0)";
            },
            enter(el,done){
                el.offsetWidth;

                // 小球动画优化思路
                // 1. 先分析 动画 不准确的本质  我们把小球的位移到的位置，  已经局限在了 某一分辨率下的  滚动未滚动下
                // 2. 分辨率和测试时候不一样  或者  滚动有一定的滚动距离之后问题出现了

                //获取小球的在页面的位置
                                    
                const ballPosittion = this.$refs.ball.getBoundingClientRect();
                const badgePosittion = document.getElementById("badge").getBoundingClientRect();
   
                const xDist = badgePosittion.left - ballPosittion.left;
                const yDist = badgePosittion.top - ballPosittion.top;
                console.log(xDist)
                console.log(yDist)
    
                el.style.transform = ` translate( ${xDist}px,${yDist}px) `;
                el.style.transition = "all ls cubic-bezier(.4,-0.3,1,.68)";
                done();
            },
            afterEnter(el){
                this.ballFlag = !this.ballFlag;
            },
            getSelectedCount(count){
                // 当子组件  选中的数量传递父组件的时候 ， 把选中的值保存到data上
                this.selectedCount = count
                console.log('父组件' + this.selectedCount)
            }
        }
    }
</script>

<style lang="scss" scoped>
.goodinfo{
    background-color: #eee;
    overflow: hidden;
}
.now_price{
    color: red;
    font-size: 16px;
    font-weight: bold;
}
.mui-card-footer{
    display: block;
    button{
        margin: 12px 0;
    }
}
.ball{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 429px;
    left: 80px;
    // transform: translate(60px,300px)
}
.mui-card-content-inner p:nth-of-type(2) {
    display: flex;
    align-items: center;
}
</style>